import React, { useState } from'react';
import { NavBar, Radio, Button, TextArea, Toast } from 'antd-mobile';
import { LeftOutline, AddOutline } from 'antd-mobile-icons';
import { useNavigate, useParams, useLocation } from'react-router-dom';
import '../styles/bookingPatient.scss'

// 患者信息接口
interface Patient {
  id: string;
  name: string;
  age: number;
  gender: '男' | '女';
  relation: string;
  isDefault?: boolean;
}

const BookingPatientPage: React.FC = () => {
  const navigate = useNavigate();
  const { doctorId } = useParams<{ doctorId: string }>();
  const location = useLocation();

  // 解析URL参数中的日期和时间
  const queryParams = new URLSearchParams(location.search)
  const selectedDate = queryParams.get('date') || '';
  const selectedTime = queryParams.get('time') || '';

  // 患者列表
  const [patients] = useState<Patient[]>([
    { id: '1', name: '张三', age: 25, gender: '男', relation: '本人', isDefault: true },
    { id: '2', name: '李四', age: 65, gender: '男', relation: '父亲' }
  ]);
  
  // 选中的患者、是否添加新患者、病情描述
  const [selectedPatient, setSelectedPatient] = useState<string>(patients[0].id);
  const [addNewPatient, setAddNewPatient] = useState<boolean>(false);
  const [diseaseDescription, setDiseaseDescription] = useState<string>('');

  // 模拟医生数据
  const doctor = {
    id: doctorId || '1',
    name: '张医生',
    title: '主任医师',
    department: '心内科',
    hospital: '协和医院',
    fee: 150
  }

  const handleBack = () => {
    navigate(`/booking/${doctorId}`);
  }

  const handlePatientSelect = (patientId: string) => {
    setSelectedPatient(patientId)
    setAddNewPatient(false)
  }

  const handleAddPatient = () => {
    Toast.show("点击了添加就诊人按钮")
    return
  }

  const handleSubmit = () => {
    if (!selectedPatient) {
      Toast.show({ icon: 'fail', content: '请选择就诊人' });
      return;;
    }

    if (!diseaseDescription.trim()) {
      Toast.show({ icon: 'fail', content: '请填写病情描述' });
      return;;
    }

    // 获取医生信息，优先使用location.state中的数据，如果没有则使用本地定义的数据
    const doctorInfo = location.state?.doctor || doctor;

     // 获取日期时间信息，优先使用location.state中的数据
     const dateInfo = location.state?.selectedDate || { 
      day: '周四',
      date: selectedDate || '0720'
    };

    const timeInfo = location.state?.selectedTime || selectedTime || '10:00'

    // 获取选择的患者信息
    const patientInfo = patients.find(p => p.id === selectedPatient)

    // 跳转到确认订单页面
    navigate('/confirm-order', {
      state: {
        doctor: doctorInfo,
        selectedDate: dateInfo,
        selectedTime: timeInfo,
        selectedPatient: patientInfo,
        diseaseDesc: diseaseDescription,
      }
    })
  }

  return (
    <div className="booking-patient-page">
      <NavBar
        className='nav-bar'
        backArrow={<LeftOutline />}
        onBack={handleBack}
      >预约挂号</NavBar>  

      {/* 选择时间段展示 */}
      <div className="selected-time-info">
        <div className="time-info-content">
          <div className="time-info-title">
            {selectedDate} {selectedTime}
          </div>
          <div className="time-info-desc">
            剩余3个号
          </div>
        </div>
      </div>

      {/* 选择就诊人 */}
      <div className="patient-section">
        <h3 className="section-title">选择就诊人</h3>
        <div className="patient-list">
          <Radio.Group
            value={selectedPatient}
            onChange={(val) => handlePatientSelect(val as string)}
          >
            {patients.map(patient => (
              <div className="patient-item" key={patient.id}>
                <Radio value={patient.id} className='patient-radio'>
                  <div className="patient-info">
                    <div className="patient-name">
                      {patient.name}
                      {patient.isDefault && <span className='default-tag'>默认</span>}
                    </div>
                    <div className="patient-detail">
                      {patient.age}岁 | {patient.gender}
                    </div>
                  </div>
                </Radio>
              </div>
            ))}
          </Radio.Group>  
          <div className="add-patient" onClick={handleAddPatient}>
            <AddOutline className='add-icon' />
            <span>添加就诊人</span>
          </div>
        </div>
      </div>

      {/* 病情描述 */}
      <div className="disease-sectio">
        <h3 className="section-title">病情描述(选填)</h3>
        <div className="textarea-container">
          <TextArea
            placeholder="请简要描述您的症状和病情，便于医生提前了解"
            value={diseaseDescription}
            onChange={setDiseaseDescription}
            autoSize={{ minRows: 3, maxRows: 5}}
            className='disease-textarea'
          />  
        </div>
      </div>

      {/* 底部操作栏 */}
      <div className="booking-footer">
        <div className="fee-info">
          <span className="fee-label">¥ {doctor.fee}</span>
        </div>
        <Button 
          className='confirm-button'
          color="primary"
          onClick={handleSubmit}
        >确认预约</Button>
      </div>
    </div>
  )
}

export default BookingPatientPage;